<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React 组件基本了解</title>
</head>

<body>

    <div id="demo1"></div>
    <div id="demo2"></div>
    <div id="demo3"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">

        //1. 定义组件
        //方式一 工厂函数组件(简单组件)

        function MyComponent() {
            return <h1>工厂函数组件(简单组件)</h1>
        }

        //箭头函数组件
        //  MyComponent3 = () => {
        //     return (<h1>箭头函数组件</h1>)
        //  }


        //类组件
        class MyComponent2 extends React.Component {

            state = {
                name: '张三',
                age: 111
            }



            render() {
                const { gender } = this.props
                console.log(this)
                console.log(gender)
                return <h1>类组件(组件类)</h1>
            }
        }

        ReactDOM.render(<MyComponent />, document.getElementById('demo1'))
        ReactDOM.render(<MyComponent2 gender={'男'} />, document.getElementById('demo2'))

    </script>
</body>

</html>